<template>
  <div>
    <div class="has-top has-bottom">
      <div class="bg-box bg-primary" />
      <van-form ref="detailForm">
        <!-- 详情 -->
        <div class="br-12 mg-25 pd-25 bg-white">
          <h3 class="item-tle  left-star">商品详情</h3>
          <div class=" mt-15">
            <div class="prductItem-detail ">
              <p class="color-gray mb-10 ml-15">商品名称</p>
              <van-field
                v-model="productDetail.ProductName"
                class="pos-a bottom-0"
                name="商品名称"
                label=""
                placeholder="请输入商品名称"
                :rules="[{ required: true, message: ' ' }]"
              />
            </div>
          </div>
          <div class="mt-35 product-price-box">
            <div class="flex-1 ">
              <p class="color-gray ml-15 mb-10">单位</p>
              <van-field

                v-model="productDetail.Unit"

                name="单位"
                label=""
                placeholder="请输入商品单位"
                :rules="[{ required: true, message: ' ' }]"
              />
            </div>
            <div class="flex-s-s mt-35">
              <div class="flex-item">
                <p class="color-gray ml-15 mb-10">价格</p>
                <van-field
                  v-model="productDetail.ProductPrice"
                  name="价格"
                  label=""
                  placeholder="请输入商品价格"
                  :rules="[{ required: true, message: ' ' }]"
                />
              </div>
              <div class="flex-item">
                <p class="color-gray ml-15 mb-10">市场价</p>
                <van-field

                  v-model="productDetail.MarketPrice"

                  name="市场价"
                  label=""
                  placeholder="请输入商品市场价"
                  :rules="[{ required: true, message: ' ' }]"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 分类 -->
        <div class="br-12 mg-25 pd-25 bg-white">
          <h3 class="item-tle left-star">选择分类</h3>
          <div class="flex mt-15">
            <ul class="classifyList flex">
              <li v-for="(item,index) in classifyList" :key="index" class="classifyItem flex-s-0 " :class="index === activeIndex ? 'activeClassify' : ''" @click="changeClassify(index)">
                <p>{{ item.Name }}</p>
              </li>
              <li class="classifyItem flex-s-0 openClassifyList" @click="openClassifyList">
                <p><svg-icon icon-class="add" class="fs-30 add" />添加分类</p>
              </li>
            </ul>
          </div>
          <p v-show="activeIndex<0" class="color-danger fs-10">请选择分类</p>
        </div>

        <!-- 规格 -->
        <div class="br-12 mg-25 pd-25 bg-white">
          <h3 class="item-tle">商品规格 <span class="arrow color-gray-light" @click="changeSpec">修改</span></h3>
          <div v-show="pageData.sku">
            <p class="left-line mt-30">{{ pageData.sku }}</p>
            <div class="mt-15 ptb-10 br-12" style="background:#f7f7f7">
              <ul class="flex lh-58">
                <li class="flex-1 tac color-gray">规格</li>
                <li class="flex-1 tac color-gray">价格(￥)</li>
                <li class="flex-1 tac color-gray">库存 <span v-show="productDetail.Unit">({{ productDetail.Unit }})</span></li>
              </ul>
              <ul v-for="(item,index) in productDetail.ProductSkuList" :key="index" class="flex lh-58">
                <li class="flex-1 tac ">{{ item.SkuName }}</li>
                <li class="flex-1 tac ">{{ item.SkuPrice }}</li>
                <li class="flex-1 tac ">{{ item.Stock }}</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 图片 -->
        <div class="br-12 mg-25 pd-25 bg-white">
          <h3 class="item-tle left-star">商品图片</h3>
          <div class="mt-15">
            <draggable v-model="pageData.imgList" :options="options" class="flex flex-wrap" @end="end">
              <div v-for="(item,index) in pageData.imgList" :key="index" class="productImgItem">
                <img class="drag-item" :src="item">
                <div class="img-close-box" @click="deleteImg(index)">
                  <span class="img-close" />
                </div>
              </div>
              <div class="add-img productImgItem ">
                <van-uploader ref="imgUpload" :after-read="afterRead" />
              </div>
            </draggable>
          </div>
          <p v-show="pageData.imgList.length<1" class="color-danger fs-10">请上传商品图片</p>
        </div>

        <!-- 商品描述 -->
        <div class="br-12 mg-25 pd-25 bg-white">
          <h3 class="item-tle">商品描述</h3>
          <div class="mt-15 pos-r textarea-box">
            <van-field
              v-model="productDetail.ShortDescription"
              rows="2"
              autosize
              type="textarea"
              maxlength="200"
              placeholder="请对商品进行描述..."
              show-word-limit
            />
          </div>
        </div>

        <!-- 推荐商品 -->
        <div class="br-12 mg-25 pd-25 bg-white">
          <h3 class="item-tle">推荐商品</h3>
          <div class="mt-15">
            <p class="checkbox" :class="productDetail.IsRecommend===1?'checked':''" @click="toggle">设置推荐商品，在推荐分类中显示</p>
          </div>
        </div>
        <!-- 库存 -->
        <div v-show="!pageData.sku" class="br-12 mg-25 pd-25 bg-white product-stock">
          <h3 class="item-tle">库存</h3>
          <div class="mt-15">
            <van-field

              v-model="productDetail.Stock"

              name="库存"
              label="库存数"
              placeholder="库存"
            />
          </div>
        </div>
      </van-form>
    </div>

    <div class="nav-bottom fixed-bottom">
      <div class="btn-box flex-s-c">
        <button class="btn-middle bg-primary color-white" @click="updateStatu">{{ productDetail.ProductStatus===1?"下架":"上架" }}</button>
        <button class="btn-middle bg-second color-white" @click="save">保存</button>
      </div>
    </div>

    <!-- 分类弹出层 -->
    <van-popup v-model="showClassifyList" position="right" style="width:100%;height:100%;background:#f5f5f5">
      <productClassifyEdit :classify-list="classifyList" @closeClassifyList="closeClassifyList" />
    </van-popup>

    <!-- 规格编辑弹出层 -->
    <van-popup v-model="showSpec" position="right" style="width:100%;height:100%;background:#f5f5f5">
      <van-nav-bar
        fixed
        title="规格编辑"
        left-arrow
        right-text="删除"
        class="bg-tp"
        @click-left="closeSpec"
        @click-right="showDeldeteSpecDialog=true"
      />
      <van-form ref="skuForm">
        <div class="has-top">
          <div class="br-12 mg-25 pd-25 bg-white">
            <h3 class="item-tle  left-star">规格名称</h3>
            <div class="mt-15 pos-r ">
              <van-field
                v-model="pageData.sku"
                class="bg-f7 br-12"
                name="规格名称"
                label=""
                placeholder="请输入规格名称"
                :rules="[{ required: true, message: ' ' }]"
                @blur="onBlur"
              />
            </div>
            <div class="mt-60">
              <ul class="flex-v-c ">
                <li class="flex-1 mr-20 color-gray pos-r left-star">规格</li>
                <li class="flex-1 mr-20 color-gray pos-r left-star">价格(￥)</li>
                <li class="flex-1 mr-20 color-gray">库存 <span v-show="productDetail.Unit">({{ productDetail.Unit }})</span></li>
                <svg-icon icon-class="add-1" class="fs-32  color-primary" @goPage="addSpecItem" />
              </ul>
              <ul v-for="(item,index) in productDetail.ProductSkuList" :key="index" class="flex-v-c  mt-20 product-sku-list">
                <li class="flex-1 mr-20">
                  <van-field
                    v-model="item.SkuName"
                    class="bg-f7 br-12"
                    name="规格选项"
                    label=""
                    placeholder="规格选项"
                    :rules="[{ required: true, message: ' ' }]"
                    @blur="onBlur"
                  />
                </li>
                <li class="flex-1 mr-20">
                  <van-field
                    v-model="item.SkuPrice"
                    class="bg-f7 br-12"
                    name="单价"
                    label=""
                    placeholder="单价"
                    :rules="[{ required: true, message: ' ' }]"
                    @blur="onBlur"
                  />
                </li>
                <li class="flex-1 mr-20">
                  <van-field
                    v-model="item.Stock"
                    class="bg-f7 br-12"
                    name="库存"
                    label=""
                    placeholder="请输入库存"
                    @blur="onBlur"
                  />
                </li>
                <svg-icon icon-class="delete-1" class="fs-32  color-danger" @goPage="deleteSpecItem(index)" />
              </ul>
            </div>
          </div>
        </div>
      </van-form>
    </van-popup>

    <!-- 删除商品提示弹窗 -->
    <van-dialog v-model="showDeldeteProductDialog" :show-cancel-button="noshow" :show-confirm-button="noshow" class="dialog">
      <div class="plr-50 fs-28">
        <h2 class="tac fs-34 fw-500 pt-40 pb-20">提示</h2>
        <p class="pb-30  tac">确定要删除此商品？ </p>
      </div>
      <div class="ht fs-32 flex">
        <button class="flex-1 tac lh-100 hr dialog-btn" @click="showDeldeteProductDialog=false">返回</button>
        <button class="color-primary flex-1 tac lh-100 dialog-btn" @click="deleteProduct">确定</button>
      </div>
    </van-dialog>

    <!-- 删除规格提示弹窗 -->
    <van-dialog v-model="showDeldeteSpecDialog" :show-cancel-button="noshow" :show-confirm-button="noshow" class="dialog">
      <div class="plr-50 fs-28">
        <h2 class="tac fs-34 fw-500 pt-40 pb-20">提示</h2>
        <p class="pb-30  tac">确定删除规格？ </p>
      </div>
      <div class="ht fs-32 flex">
        <button class="flex-1 tac lh-100 hr dialog-btn" @click="showDeldeteSpecDialog=false">返回</button>
        <button class="color-primary flex-1 tac lh-100 dialog-btn" @click="deleteSpec">确定</button>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import imgBox from 'components/imgBox'
import productClassifyEdit from 'views/viewComponents/productClassifyEdit'
import { upLoad } from 'api/upload'
import { GetStoreProductCategoryList, GetStoreProductDetail, DeleteStoreProduct, EditStoreProduct } from 'api/store'
import { GetInintProductDetailInfo } from 'api/product'
export default {
  name: 'ProductDetail',
  components: {
    draggable,
    imgBox,
    productClassifyEdit
  },
  props: {
    // 头部搜索类型
    type: {
      type: String,
      default: 'primary'
    },
    classifyList: {
      type: Array,
      required: true
    },
    locationCity: {
      type: String
    }
  },
  data() {
    return {
      // 初始数据
      title: '商品编辑',
      rightText: '排序',
      activeIndex: -1,
      pageData: {
        logo: '',
        sku: '',
        imgList: []
      },
      showClassifyList: false,
      showSpec: false,
      showDeldeteProductDialog: false,
      showDeldeteSpecDialog: false,
      noshow: false,
      options: {
        // delay: 100,
        group: 'product',
        delayOnTouchOnly: true,
        animation: 150,
        handle: '.drag-item'
      },

      // 接口返回数据
      classifyList: ['推荐', '分类1', '智能家居', '分类1', '潮流服饰'],
      productDetail: {
        ProductName: 'Nike 耐克官方 KD',
        productNumber: 28,
        productState: '已上架',
        ProductPrice: 799,
        classifyItem: ['智能家居', '箱包鞋履', '潮流服饰', '美妆护肤', '粮油米面'],
        ProductSkuList: [
          { SkuName: 39,
            SkuPrice: 799,
            Stock: 125 },
          { SkuName: 40,
            SkuPrice: 7999,
            Stock: 12 },
          { SkuName: 41,
            SkuPrice: 799,
            Stock: 125 }
        ],
        ImageUrl: ['', '', '', '', '', '', '', ''],
        ShortDescription: '',
        IsRecommend: 0,
        Unit: '双'
      }

      // 接口请求参数

    }
  },
  created() {
    this.GetInintProductDetailInfo(this.$route.params)
  },
  mounted() {
  },
  methods: {

    GetInintProductDetailInfo(id) {
      GetInintProductDetailInfo(id).then(res => {
        if (res) {
          console.log('详情：' + res)
        }
      })
    },
    // 返回
    goback() {
      // 先判断是否为新商品，然后再判断数据是否变化
      this.$utils.back(this.$route.path)
    },

    // 删除商品
    deleteProduct() {
      // 判断是否为新增产品
      if (this.productDetail.ID === 0) {
        this.$utils.back(this.$route.path)
      } else {
        this.DeleteStoreProduct(this.productDetail.ID)
      }
    },
    // 切换头像
    changeImg() {
      this.$toast('商品主图为下方商品图片第一张，如需修改请修改商品图片')
    },
    // 点击选择分类
    changeClassify(index) {
      this.activeIndex = index
      this.productDetail.ProductCategoryId = this.classifyList[index].ID
    },
    // 打开分类窗口
    openClassifyList() {
      this.showClassifyList = true
    },
    // 关闭分类窗口
    closeClassifyList(val) {
      console.log(val)
      if (val) {
        this.GetStoreProductCategoryList()
      }
      this.showClassifyList = false
    },
    // 修改规格
    changeSpec() {
      const _item = { ID: 0, SkuName: '', SkuPrice: '', Stock: 0 }
      if (!this.pageData.sku) {
        if (!this.productDetail.ProductSkuList || this.productDetail.ProductSkuList.length <= 0) {
          this.productDetail.ProductSkuList = []
          this.productDetail.ProductSkuList.push(_item)
        }
      }
      this.showSpec = true
      this.$forceUpdate()
    },
    // 新增规格项
    addSpecItem() {
      const _item = { ID: 0, SkuName: '', SkuPrice: '', Stock: 0 }
      this.productDetail.ProductSkuList.push(_item)
      this.$forceUpdate()
    },
    // 删除规格项
    deleteSpecItem(index) {
      if (this.productDetail.ProductSkuList.length === 1) {
        this.$toast('请至少保留一个规格')
        return
      }
      this.productDetail.ProductSkuList.splice(index, 1)
      this.$forceUpdate()
    },
    // 删除规格
    deleteSpec() {
      delete this.productDetail.ProductSkuList
      this.pageData.sku = ''
      this.showDeldeteSpecDialog = false
      this.showSpec = false
    },
    // 关闭规格修改弹窗
    closeSpec() {
      this.$refs.skuForm.validate().then(() => {
        this.showSpec = false
      })
    },

    // 拖拽结束
    end() {
      this.pageData.logo = this.pageData.imgList[0]
    },

    // 删除图片
    deleteImg(index) {
      this.pageData.imgList.splice(index, 1)
      if (this.pageData.imgList && this.pageData.imgList.length > 0) {
        this.pageData.logo = this.pageData.imgList[0]
      } else {
        this.pageData.logo = ''
      }
    },
    // 添加图片回调
    afterRead(file) {
      if (file) {
        upLoad({
          Content: this.$utils.getCaption(file.content, 'base64,'),
          FileType: this.$utils.getCaption(file.file.type, '/')
        }).then(res => {
          this.pageData.imgList.push(res.Data.FullPath)
          this.pageData.logo = this.pageData.logo || this.pageData.imgList[0]
        })
      }
    },
    // 切换是否推荐
    toggle() {
      this.productDetail.IsRecommend = (this.productDetail.IsRecommend === 0 || this.productDetail.IsRecommend === undefined) ? 1 : 0
      this.$forceUpdate()
    },
    onBlur() {
      console.log('失焦')
      this.$forceUpdate()
    },
    // 上/下架
    updateStatu() {
      this.productDetail.ProductStatus = this.productDetail.ProductStatus === 1 ? 2 : 1
      console.log(this.productDetail.ProductStatus)
      this.EditStoreProduct()
    },
    // 保存
    save() {
      this.$refs.detailForm.validate().then(() => {
        if (this.activeIndex < 0 || this.pageData.imgList.length <= 0) {
          this.$toast.fail('请将信息填写完整')
          return
        }
        this.EditStoreProduct()
      })
    },

    // 获取门店商品分类列表
    GetStoreProductCategoryList() {
      GetStoreProductCategoryList().then(res => {
        if (res) {
          this.classifyList = res.Data
          if (this.productDetail.ProductCategoryId) {
            const _id = this.productDetail.ProductCategoryId
            this.classifyList.forEach((item, index) => {
              if (item.ID === _id) {
                this.activeIndex = index
              }
            })
          }
        }
      })
    },

    // 获取门店商品详情
    GetStoreProductDetail(id) {
      GetStoreProductDetail({ ID: id }).then(res => {
        if (res) {
          this.productDetail = res.Data
          if (res.Data.ImageUrl) {
            this.pageData.imgList = res.Data.ImageUrl.split(',')
            if (this.pageData.imgList.length > 0) {
              this.pageData.logo = this.pageData.imgList[0]
            }
          }
          if (res.Data.ProductSkuList && res.Data.ProductSkuList.length > 0) {
            this.pageData.sku = res.Data.ProductSkuList[0].Sku
          }
          this.GetStoreProductCategoryList()
        }
      })
    },
    // 增改门店商品
    EditStoreProduct() {
      const _sku = this.pageData.sku
      const _imgList = this.pageData.imgList

      // 修改参数ProductSkuList
      if (this.productDetail.ProductSkuList && this.productDetail.ProductSkuList.length > 0) {
        if (_sku) {
          this.productDetail.ProductSkuList.forEach(item => {
            item.Sku = _sku
          })
        } else {
          this.productDetail.ProductSkuList[0].Stock = this.productDetail.Stock
          this.productDetail.ProductSkuList[0].SkuPrice = this.productDetail.ProductPrice
        }
      } else {
        const ProductSkuItem = {}
        ProductSkuItem.ID = 0
        ProductSkuItem.Stock = this.productDetail.Stock
        ProductSkuItem.SkuPrice = this.productDetail.ProductPrice
        this.productDetail.ProductSkuList = [ProductSkuItem]
      }

      // 修改参数ImageUrl
      if (_imgList.length > 0) {
        let _imgUrl = ''
        for (let i = 0; i < _imgList.length; i++) {
          if (i === _imgList.length - 1) {
            _imgUrl += _imgList[i]
          } else {
            _imgUrl = _imgUrl + _imgList[i] + ','
          }
        }
        this.productDetail.ImageUrl = _imgUrl
      }

      EditStoreProduct(this.productDetail).then(res => {
        if (res) {
          if (res.Data) {
            this.$toast.success('成功')
            this.$utils.back(this.$route.path)
          } else {
            this.$toast.fail(res.Msg || '失败')
          }
        }
      })
    },
    // 删除门店商品
    DeleteStoreProduct(id) {
      DeleteStoreProduct({ IDS: id }).then(res => {
        if (res) {
          this.$toast.success('删除成功')
          this.$utils.back(this.$route.path)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.color-white{
  /deep/.van-icon,/deep/.van-nav-bar__title,/deep/.van-nav-bar__text{
    color: #fff !important;
  }
}
/deep/.van-hairline--bottom::after{
  border:none;
}
.bg-box{
  position: absolute;
  width: 100%;
  height: 250px;
  border-radius: 0 0 30% 30%;
  z-index: -1;
}
.prductItem-detail{
  padding-bottom: 80px;
  position: relative;
  .van-cell{
    padding-left: 7.5px;
    font-size: 12px;
    background: #f7f7f7;
  }
}
.product-price-box,.product-stock{
  .van-cell{
    padding-left:7.5px;
    line-height: 1.5;
    font-size: 12px;
    background: #f7f7f7;
  }
  .flex-item{
    width:calc(50% - 12px);
  }
}
.product-stock{
  .van-cell{
    /deep/.van-field__label{
      width: auto;
    }
    /deep/.van-cell__value{
      .van-field__control{
      text-align: left;
      }
    }
  }
}
.product-sku-list{
  .van-cell{
    padding: 11px 7px;
    /deep/.van-cell__value{
      font-size: 12px;
      line-height: 1;
    }
  }

}
.item-tle{
  font-weight: 500;
  font-size: 28px;
  color: #000;
  position: relative;
}
.left-star{
  padding-left: 15px;
  &::before{
    content: "*";
    color: #FF0202;
    position: absolute;
    font-size: 28px;
    top: 5px;
    left: 0;
  }
}
.classifyList{
  width: 100%;
  flex-wrap: wrap;
  .classifyItem{
    width: calc(25% - 18px);
    text-align: center;
    line-height: 3;
    height: 72px;
    background: #F4F4F4;
    color:$color6;
    margin-bottom: 24px;
    margin-right: 24px;
    border-radius: 6px;
    &:nth-child(4n){
      margin-right: 0;
    }
  }
  .activeClassify{
   @include bg-primary;
   color:$colorF;
  }
  .openClassifyList{
    background: #fff;
    height: 72px;
    border:1px dashed$color6;
    line-height: 70px;
    p{
      padding-left: 30px;
      display: inline-block;
      position: relative;
      .add{
        position: absolute;
        left: 0;
        top: 19px;
      }
    }
  }
}
.arrow{
  font-weight: 500;
  font-size: 24px;
  height: 100%;
  line-height: 56px;
  display: inline-block;
  padding-right: 30px;
  position: absolute;
  right: 0;
  &:after{
    right: 0;
    top: 20px;
  }
}
.left-line{
  padding-left: 20px;
  position: relative;
  line-height: 1;
  &::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 4px;
    @include bg-primary;
    left: 0;
    top: 0;
  }
}
.productImgItem{
  display: inline-block;
  position: relative;
  height: 136px;
  width: 136px;
  margin-right: 34px;
  margin-bottom: 24px;
  &:nth-child(4n+4){
    margin-right: 0;
  }
  img{
    width: 100%;
    height: 100%;
  }
  .img-close-box{
    position: absolute;
    padding: 10px;
    top: -20px;
    right: -20px;
    line-height: 1;
    .img-close{
      position: relative;
      display: inline-block;
      height: 24px;
      width: 24px;
      border-radius: 50%;
      background: $black;
      &::before,&::after{
        content: '';
        position: absolute;
        width: 2px;
        height: 15px;
        transform: rotate(45deg);
        background: $colorF;
        top: 5px;
        left: 11px;
      }
      &::after{
        transform: rotate(-45deg);
      }
    }
  }
}
.add-img{
  border: 1px solid$colorC;
  &:before,&:after{
    content: '';
    position: absolute;
    height: 56px;
    width: 4px;
    top: 40px;
    left: 66px;
    background:$colorC;
  }
  &:after{
    height: 4px;
    width: 56px;
    top: 66px;
    left: 40px;
  }
  /deep/.van-uploader{
    height: 100%;
    width: 100%;
    margin: 0;
    .van-uploader__wrapper{
      height: 100%;
      width: 100%;
      margin: 0;
      .van-uploader__upload{
        height: 100%;
        width: 100%;
        margin: 0;
        background: transparent;
        .van-icon{
          display: none;
        }
      }
    }
  }
}
.textarea-box{
  /deep/.van-cell{
    background: $colorF7;
    border-radius: 6px;
    font-size: 12px;
  }
  /deep/.van-field__word-limit{
    color:$color9;
  }
}
.checkbox{
  position: relative;
  &:before{
    content:'';
    display: inline-block;
    position: absolute;
    width:32px;
    height: 32px;
    border: 1px solid $colorC;
    border-radius: 50%;
    right: 0;
  }
}
.checked{
  &:before{
    @include bg-primary();
    @include border-primary();
  }
  &:after{
    content: "";
    position: absolute;
    width: 8px;
    height: 15px;
    transform: rotate(45deg);
    border: 1px solid;
    border-color: transparent $colorF $colorF transparent;
    right: 12px;
    top: 5px;
  }
}
.btn-box{
  margin: 0 50px;
  height: 100%;
}

.input{
  width: 100%;
  border-radius: 12px;
  padding: 0 150px 0 20px;
  background: $colorF7;
  line-height: 80px;
}
.btn{
  line-height: 80px;
  padding: 0;
  width: 150px;
  font-size: 28px;
  border-radius: 0 12px 12px 0;
  @include bg-primary();
  color:$colorF;
  position: absolute;
  top: 0;
  right: 0;
}
.btn-active{
  line-height: 76px;
  box-sizing: border-box;
  height: 80px;
  padding: 0;
  width: 150px;
  font-size: 28px;
  border-radius: 0 12px 12px 0;
  @include color-primary();
  border: 1px solid currentColor;
  background: $colorF;
  position: absolute;
  top: 0;
  right: 0;
}
.pop-classify-litem{
  &:not(:last-child){
    border-bottom: 1px solid #e6e6e6;
  }
  p{
    font-size: 26px;
    line-height: 98px;
  }
}
.dialog{
  /deep/.van-dialog__confirm, .van-dialog__confirm:active{
    @include color-primary();
  }
  .input-1{
    line-height: 3;
    padding: 0 20px;
    background: $colorF7;
    border-radius: 12px;
  }
  .dialog-btn{
    background: $colorF;
    &:active{
      background: $colorF7;
    }
  }
}
</style>
